import { Button, Space } from 'ant-design-vue'
import { omit } from 'lodash-es'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

import { unpackApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { download } from '@/utils'

export default defineComponent({
  setup() {
    const tableRef = ref({} as ProTableRef)
    const route = useRoute()
    const tabelConfig = ref({
      fixedHeight: true,
      options: {
        loading: false,
        toolbarConfig: {
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        formConfig: {
          items: [
            {
              title: '开奖类型',
              field: 'prizeType',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                options: [
                  {
                    value: '',
                    label: '全部'
                  },
                  {
                    value: 1,
                    label: '中奖'
                  },
                  {
                    value: 2,
                    label: '累计翻牌奖励'
                  },
                  {
                    value: 3,
                    label: '保底奖励'
                  }
                ],
                props: {
                  placeholder: '请选择开奖类型'
                }
              }
            },
            {
              title: '参与时间',
              field: 'startTime',
              itemRender: {
                name: TABLE_RENDERER.FormItemDate,
                props: {
                  type: 'range',
                  placeholder: ['开始时间', '结束时间'],
                  valueFormat: 'x',
                  keys: ['beginTime', 'endTime']
                }
              }
            },
            {
              title: '参与用户',
              field: 'userInfo',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入手机号/用户昵称',
                  allowClear: true
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columns: [
          {
            title: '昵称',
            field: 'nickname'
          },
          {
            title: '手机号',
            field: 'mobile'
          },
          {
            title: '翻牌时间',
            field: 'createTime'
          },
          {
            title: '开奖类型',
            field: 'prizeType'
          },
          {
            title: '开奖奖励',
            field: 'prizeInfo'
          }
        ],
        pagerConfig: {
          pageSize: 10
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              form = omit(form, ['startTime'])
              const data = await unpackApi.getUnpackResult({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                activityInfoId: route.query.id,
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)
    async function handleExport() {
      const { form } = tableRef.value.table.getProxyInfo()!
      const res = await unpackApi.exportExcel({
        ...form,
        activityInfoId: route.query.id
      })
      download(res, '翻牌结果')
    }
    return {
      tableRef,
      tabelConfig,
      handleExport
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            toolbarButtons: () => (
              <Space>
                <Button onClick={this.handleExport}>导出</Button>
              </Space>
            )
          }}
          {...this.tabelConfig}
        />
      </div>
    )
  }
})
